<template>
  <van-row justify="space-around" align="center" class="container">
    <van-col span="6">
      <Icon name="wap-home-o" class="wap-home-o" @click="toHome" />
    </van-col>
    <van-col span="6" class="text" @click="toHome">
      网易严选
    </van-col>
    <van-col span="6" class="searchAndCart">
      <Icon name="search" class="search" @click="toSearch" />
      <Icon name="shopping-cart-o" @click="toCart" />
    </van-col>
  </van-row>

</template>
<script lang="ts">
export default {
  name: 'YanXuanHeader'
}
</script>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { Icon, } from 'vant'
const router = useRouter()
//点击跳转主页的回调
const toHome = () => {
  router.push('/')
}
//点击跳转搜索的回调
const toSearch = () => {
  router.push('/search')
}
//点击跳转购物车的回调
const toCart = () => [
  router.push('/cart')
]

</script>

<style scoped>
.container {
  background-color: #fff;
  border-bottom: 1.5px solid rgb(202, 201, 201);
  height: 1.1733rem;
}

.text {
  font-size: .5333rem;
  text-align: center;
}

.search {
  margin-right: .2667rem;
}

.searchAndCart {
  display: flex;
  justify-content: end;
}
</style>